<template>
	<view class="wrap">
		<que-nav :loreName="loreName" :currPage="currPage" :taskName="taskName" @backUp="backUp"></que-nav>
		<!-- 听看背写固 -->
		<five-step :fiveIndex="fiveIndex"  :fiveArr="fiveArr" :moveWidth="moveWidth" :moveLeft="moveLeft"></five-step>
		<!-- stepCon -->
		<template v-if="loreTypeName == 'practice'">
			<!-- 答题进度 -->
			<!-- <exam-progress :currPercent="currPercent" :currIndex="currIndex" :queLen="queLen"></exam-progress> -->
			<view class="padd">
				<view class="innerQues"
					v-for="(item,index) in queList"
					:key="index"
					v-show="(index+1) == currIndex"
				>
					<que-item
						:item="item" 
						:index="index" 
						:currIndex="currIndex" 
						@selectOption="selectOption"
						@selectMultiOption="selectMultiOption"
						@selectTkOpt="selectTkOpt"
					></que-item>
				</view>
			</view>
			<!-- 底部按钮动作 -->
			<que-btn
				:currPage="currPage"
				:btnTit="btnTitGg"
				:ansRightNum="ansRightNum" 
				:ansErrNum="ansErrNum" 
				:currIndex="currIndex"
				:queLen="queLen"
				:lastQueFlag="lastQueFlag"
				:isDisableFlag="isDisableFlag"
				:completeStatus="completeStatus"
				@submitQueRes="submitQueRes" 
				@goNextQue="goNextQue"
				@lastSubmitQueRes="lastSubmitQueRes"
				@showQueCard="showQueCard" 
			></que-btn>
		</template>
		<template v-else>
			<step-con :sourceUrl="sourceUrl" :list="list" :loreTypeName="loreTypeName" @showJtsfAns="showJtsfAns"></step-con>
			<!-- 底部Btn -->
			<step-bot :btnTit="btnTit" :disFlag="disFlag" @goStep="goStep"></step-bot>
		</template>
		<!--  @showQueRes="showQueRes" -->
		<!-- <que-btn :btnTit="btnTitGg" @showQueCard="showQueCard"></que-btn> -->
		<!-- 巩固训练底部答题卡 -->
		<tui-bottom-popup :show="popupShow" @close="hidePopup" :radius="radius" :mask="mask">
			<view class="popuoView">
				<template v-if="popOpt == 'queCard'">
					<que-card :currIndex="currIndex" :queList="queList" :queLen="queLen" @switchQue="switchQue"></que-card>
				</template>
				<template v-else-if="popOpt == 'queRes'">
					<que-res currPage="stepStudy" :ansRightFlag="ansRightFlag" :jfNum="jfNum"></que-res>
				</template>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import QueNav from '../queList/components/QueNav'
	import FiveStep from './components/FiveStep'
	import StepCon from './components/StepCon'
	import StepBot from './components/StepBot'
	import QueItem from '../queList/components/QueItem'
	import QueBtn from '../queList/components/QueBtn'
	import QueCard from '../queList/components/QueCard'
	import QueRes from '../queList/components/QueRes'
	import { getStepQuestionData,insertStudyInfo,updateLogStatus } from '@/api/zhuxue'
	import zhuxueUtils from '@/common/zhuxueUtils.js'
	export default {
		components:{
			QueNav,
			FiveStep,
			StepCon,
			//ExamProgress,
			QueItem,
			QueCard,
			QueRes,
			StepBot,
			QueBtn
		},
		data() {
			return {
				loreName:'',
				taskName:'',
				fiveArr:[
					{value:'听',name:'视频讲解',selFlag:true},
					{value:'看',name:'点拨指导',selFlag:false},
					{value:'背',name:'知识清单',selFlag:false},
					{value:'写',name:'解题示范',selFlag:false},
					{value:'固',name:'巩固训练',selFlag:false},
				],
				moveWidth:0,
				moveLeft:'50%',
				btnTit:'我听完了',
				btnTitGg:'提交',
				loreTypeName:'video',//默认视频讲解 video guide loreList example practice
				disFlag:false,
				tmpLeft:0,
				tmpWidth:0,
				fiveIndex:0,
				popupShow:false,
				radius:true,
				mask:true,
				popOpt:'',//queCard queRes
				ansRightFlag:null,//回答正确/错误的flag 用于显示底部弹层(每道题)
				list:[],
				sourceUrl:'',
				queList:[],
				loreId:0,
				studyLogId:0,
				originLoreId:0,
				currSubId:0,
				currIndex:1,
				currPercent:0,
				percentIndex:0,
				ansRightNum:0,
				ansErrNum:0,
				queLen:0,
				isDisableFlag:false,//每道题提交的disabled状态
				completeStatus:-1,//记录每道题的是否已做0 未做 1已做
				lastQueFlag:false,//是否为最后一题标识
				multiArr:[],//用于存储多选题的选项
				jfNum:0,
				nextLoreIdStr:'',
				currPage:'studyPage',
				currentLoreId:0
			}
		},
		onLoad(options){
			// setInterval(()=>{
			// 	this.roateteNum = this.completeNum * (360/this.queLen);
			// 	this.completeNum ++;
			// 	console.log(this.roateteNum)
			// },2000)
			this.loreName = options.loreName;
			this.currSubId = options.currSubId;
			this.loreId = options.loreId;
			this.originLoreId = options.loreId;
			var stepField = uni.getStorageSync('stepField');
			this.taskName = stepField.loreTaskName;
			this.studyLogId = stepField.studyLogId;
			this.nextLoreIdStr = stepField.nextLoreIdArray;
			this.currentLoreId = options.currentLoreId;
			this.loadStepStudyData('ininLoad');
		},
		methods: {
			loadStepStudyData(opt){
				var stepField = uni.getStorageSync('stepField');
				var field = { account:uni.getStorageSync('token'),loreTypeName:this.loreTypeName };
				Object.assign( field,stepField );
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				//console.log(field)
				getStepQuestionData({content:contentStr}).then(res=>{
					if(this.loreTypeName == 'video'){
						this.sourceUrl = res.data.datas.sourceDetail;
					}else{
						this.list = res.data.datas.sourceDetail;
					}
				}).catch(err=>{
					console.log(err)
				});
			},
			loadGgxlQueList(){
				this.queList = uni.getStorageSync('studyQueList');
				this.queLen = this.queList.length;
				this.completeStatus = this.queList[0].completeStatus;
			},
			goStep(){
				if(this.fiveIndex == 4){return;}
				if(this.loreTypeName != 'practice'){
					this.disFlag = true;
				}
				if(this.fiveIndex == 0){//点拨指导
					this.loreTypeName = 'guide';
					// if(!this.pad){
					// 	this.tmpLeft += 210;
					// }else{
					// 	this.tmpLeft += 208;
					// }
					this.btnTit = '我看完了';
				}else if(this.fiveIndex == 1){//知识清单
					this.loreTypeName = 'loreList';
					this.btnTit = '我背完了';
					// if(!this.pad){
					// 	this.tmpLeft += 136;
					// }else{
					// 	this.tmpLeft += 136;
					// }
				}else if(this.fiveIndex == 2){//解题示范
					this.loreTypeName = 'example';
					this.btnTit = '我学会了';
					//this.tmpLeft += 140;
				}else if(this.fiveIndex == 3){//巩固训练
					this.loreTypeName = 'practice';
					//this.tmpLeft += 138;
				}else{return;}
				this.tmpWidth += 150;
				this.moveLeft = this.tmpLeft + 'rpx';
				this.moveWidth = this.tmpWidth;
				setTimeout(()=>{
					this.fiveIndex ++;
					this.fiveArr[this.fiveIndex].selFlag = true;
					this.disFlag = false;
				},500);
				if(this.loreTypeName == 'practice'){
					this.loadGgxlQueList();
				}else{
					this.loadStepStudyData('handler');
				}
			},
			//提交动作
			submitQueRes(){
				var tmpIndex = Number(this.currIndex-1);
				var dxFlag = true,multiResFlag = true,tkResFlag = true;
				var tmpList = this.queList[tmpIndex];
				if(tmpList.lqType == '单选题' || tmpList.lqType == '判断题'){
					if(tmpList.currAns == ''){
						this.util.showToast('请选择答案');
						dxFlag = false;
						return;
					}
				}else if(tmpList.lqType == '多选题'){
					//var tmpTkArr = this.queList[tmpIndex].multiOptIndexArr;
					if(this.multiArr.length == 0){
						this.util.showToast('请完善选项答案');
						multiResFlag = false;
						return;
					}
					tmpList.currAns = this.multiArr.join(',');
				}else if(tmpList.lqType == '填空选择题'){
					var tmpTkArr = tmpList.tkOptIndexArr;
					for(var i=0;i<tmpTkArr.length;i++){
						if(tmpTkArr[i].tkIndex == -1){
							tkResFlag = false;
						}
					}
					if(!tkResFlag){
						this.util.showToast('请完善选项答案');
						return;
					}
					const newArr = tmpTkArr.map(item=>{
						return item.value;
					});
					tmpList.currAns = newArr.join(',');
				}
				var answerOptionArrayStr = zhuxueUtils.arrayToJson(tmpList.answerOptionArray);
				var field = { account:uni.getStorageSync('token'),studyLogId:this.studyLogId,loreId:this.loreId,subId:this.currSubId,currentLoreId:this.currentLoreId,answerOptionArrayStr:answerOptionArrayStr,questionStep:this.currIndex,myAnswer:tmpList.currAns,lqId:tmpList.lqId,loreTaskName:this.taskName };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				//console.log(field)
				this.isDisableFlag = true;
				this.btnTitGg = '提交中...';
				this.popOpt = 'queRes';
				insertStudyInfo({content:contentStr}).then(res=>{
					//console.log(res)
					var studyResult = res.data.datas.studyResult;
					this.jfNum = res.data.datas.coin;
					this.popupShow = true;
					if(studyResult == 1){//做对
						this.ansRightFlag = true;
						this.ansRightNum+=1;
						this.$set(tmpList,'result',1);
					}else{//做错
						this.ansRightFlag = false;
						this.ansErrNum+=1;
						this.$set(tmpList,'result',0);
					}
					this.percentIndex++;
					this.currPercent = Number(  this.percentIndex/this.queLen )*100;
					if(tmpList.lqType == '单选题' || tmpList.lqType == '判断题'){//更新当前的索引
						tmpList.myAnsSingleIndex = tmpList.optIndex;
					}
					setTimeout(()=>{
						tmpList.completeStatus = 1;
						this.completeStatus = 1;
						this.isDisableFlag = false;
						this.popupShow = false;
						this.jfNum = 0;
						if(this.currIndex == this.queLen){
							this.lastQueFlag = true;
							this.btnTitGg = '做完了';
						}else{
							this.btnTitGg = '进入下一题'
						}
					},1200);
				}).catch(err=>{
					console.log(err)
					this.btnTitGg = '提交';
					this.isDisableFlag = false;
				});
				//console.log( zhuxueUtils.(this.queList[index].answerOptionArray) )
			},
			//进入下一题
			goNextQue(){
				var tmpList = this.queList[this.currIndex];
				this.completeStatus = tmpList.completeStatus;//更新completeStatus状态
				this.currIndex ++; 
				if(this.completeStatus == 0){
					this.btnTitGg = '提交';
				}else{
					if(this.currIndex == this.queLen && tmpList.result >= 0){
						this.lastQueFlag = true;
						this.btnTitGg = '做完了';
					}else{
						this.btnTitGg = '进入下一题';
					}
				}
			},
			//最后提交更新当前学习状态 
			//表示巩固训练做完，修改step的值为3，stepComplete=0,,isFinish=0,access=3
			//access:2--巩固训练完成（需要进入该阶段的再次诊断）
			//access:1--该阶段的再次诊断完成（需要进入下一个知识典的5步学习法）
			//access:0--5部学习法未完成
			//step默认为3--学习关联知识典阶段
			//只要巩固训练做完后就修改状态
			//先查询有无再次诊断的记录
			lastSubmitQueRes(){
				var studyLogId_curr = 0;
				var step_new = 0;
				if(this.percentIndex == this.queLen){
					var tmpList = this.queList[0];
					var loreTypeName = tmpList.loreType,currentLoreId = this.currentLoreId;
					if(currentLoreId == this.originLoreId){
						step_new = 4;
					}else{
						step_new = 3;
					}
					//检测登录状态
					this.updateLogStatus(step_new,0,1,3,currentLoreId,loreTypeName);
					// console.log('studyLogId_curr=' + studyLogId_curr);
					// console.log('currentLoreId=' + currentLoreId)
					// console.log('originLoreId=' + this.originLoreId)
					// console.log('loreTypeName=' + loreTypeName)
				}else{
					this.util.showToast('存在尚未完成的试题');
				}
			},
			updateLogStatus(step,stepComplete,isFinish,access,currentLoreId,loreTypeName){
				var studyLogId_curr = 0;
				this.isDisableFlag = true;
				this.btnTit = '提交中...';
				var field = { account:uni.getStorageSync('token'),studyLogId:this.studyLogId,loreId:this.originLoreId,submitType:'study',
							currentStepLoreIdStr:this.nextLoreIdStr,step:step,access:access,currentLoreId:currentLoreId,isFinish:isFinish,stepComplete:stepComplete};
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				//console.log(field)
				updateLogStatus({content:contentStr}).then(res=>{
					//console.log(res)
					this.originLoreId = res.data.datas.loreId;
					studyLogId_curr = res.data.datas.studyLogId;
					uni.navigateTo({
						url:'/pages/subIndex/traceBack/traceBack?studyLogId=' + studyLogId_curr + '&loreId=' + this.originLoreId + '&fromPage=studyPage',
						success:()=>{
							uni.removeStorageSync('stepField');
							uni.removeStorageSync('studyQueList');
						}
					})
				}).catch(err=>{
					this.btnTit = '做完了';
					this.isDisableFlag = false;
					console.log(err)
				});
			},
			//单选题/判断题点击某一项赋予active
			selectOption(index,currNum,myAns){
				this.queList[index].optIndex = currNum;
				this.queList[index].currAns = myAns;
			},
			//填空选择题每一项的点击
			selectTkOpt(index,ansNumIndex,jjIndex){
				var item = this.queList[index];
				this.$set(item.tkOptIndexArr[ansNumIndex],'tkIndex',jjIndex)//对象
				item.tkOptIndexArr[ansNumIndex].value = zhuxueUtils.transOptToWords(jjIndex);
			},
			//多选题点击某几项
			selectMultiOption(index,innerIndex,myAns){
				//console.log(myAns)
				var item = this.queList[index].multiOptIndexArr[innerIndex];
				if(item.selFlag == true){
					this.$set(item,'selFlag',false);
					for(var i=0;i<this.multiArr.length;i++){
						if(myAns == this.multiArr[i]){
							this.multiArr.splice(i,1);
						}
					}
				}else if(item.selFlag == false){
					this.$set(item,'selFlag',true)
					this.multiArr.push(myAns);
				}
				console.log(this.multiArr)
			},
			//展示答题卡
			showQueCard(){
				this.popOpt = 'queCard';
				this.radius = true;
				this.popupShow = true;
			},
			//切换答题卡题号
			switchQue(nextIndex,index){
				this.popupShow = false;
				this.currIndex = nextIndex;
				var tmpList = this.queList[this.currIndex-1];
				this.completeStatus = tmpList.completeStatus;
				if(this.completeStatus == 0){
					this.btnTitGg = '提交';
				}else{
					if(this.currIndex == this.queLen && tmpList.result >= 0){
						this.lastQueFlag = true;
						this.btnTitGg = '做完了';
					}else{
						this.lastQueFlag = false;
						this.btnTitGg = '进入下一题';
					}
				}
			},
			//解题示范查看答案
			showJtsfAns(item){
				item.showAnsFlag = true;
			},
			hidePopup(){
				this.popupShow = false;
			},
			backUp(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		@include respTo(phone){
			padding-bottom:130rpx;
		}
		@include respTo(pad){
			padding-bottom:120rpx;
		}
	}
	page{
		position: relative;
		background: $pss-bg-primary;
		@include respTo(phone){
			margin-top: calc(270rpx + var(--status-bar-height));
		}
		@include respTo(pad){
			margin-top: calc(230rpx + var(--status-bar-height));
		}
	}
</style>
